<template>
  <div>
    <CloudTable
      class="test-table"
      :columns="columns"
      :dataSource="dataSource"
      :isDragColumn="true"
      :noBorder="false"
      :verticalBorder="true"
    >
    </CloudTable>
    <div style="margin-top: 20px">
      tableKey: dragTable1
      <CloudTable
        class="test-table"
        tableKey="dragTable1"
        :columns="columns1"
        :dataSource="dataSource1"
        :isDragColumn="true"
        :noBorder="false"
        :verticalBorder="true"
        rowKey="key1"
      >
      </CloudTable>
    </div>
  </div>
</template>

<script>
  export default {
    title: '7.可拖动列',
    subTitle: '设置isDragColumn 注意:此处column 的width只能传 Number类型;每个table唯一key（防止一个组件内有多个可拖动的表格（需要在localStorage存一份对应Table拖动的最新列数据），如果不传，刷新后拖动的列会回到初始值）',
    data () {
      return {
        columns: [
          {
            title: 'name',
            dataIndex: 'name',
            width: 500,
            ellipsis: true
          },
          {
            title: 'Age',
            dataIndex: 'age',
            width: 500,
          },
          {
            title: 'Sex',
            dataIndex: 'sex',
            width: 500,
          },
        ],
        columns1: [
          {
            title: '日期',
            dataIndex: 'date',
            type: 'date',
            ellipsis: true
          },
          {
            title: '日期+时间',
            dataIndex: 'dateTime',
            type: 'dateTime'
          },
          {
            title: '手机号',
            dataIndex: 'mobile',
            type: 'mobile'
          },
          {
            title: '名称',
            dataIndex: 'content',
            type: 'content'
          },
          {
            title: '金额/数字',
            dataIndex: 'number',
            type: 'number'
          }
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            age1: '1111111111111111111111111111111111111111111111111111111111111111111111',
            age2: '1111111111111111111111111111111111111111111111111111111111111111111111',
            sex: '男'
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            sex: '女'
          },
          {
            key: '3',
            name: 'Joe Black JoeJoeBlackJoeJoeBlackJoeJoeBlackJoeJoeBlackJoe',
            age: 32,
            sex: '男'
          },
        ],
        dataSource1: [
          {
            key: '4',
            date: '2020-11-11',
            dateTime: '2020-11-11 20:20:20',
            mobile: '18393369757',
            content: '睡到几点深度思考',
            number: '120,000,000',
            image: ''
          },
          {
            key: '5',
            date: '2020-11-12',
            dateTime: '2020-11-12 10:00:35',
            mobile: '028-3244355',
            content: '1发动机看看大家风范的',
            number: '45455454',
            image: ''
          }
        ],
      }
    },
    methods: {
      onChange (date, dateString) {
        console.log(date, dateString);
      },
    }
  }
</script>

<style lang="scss">
</style>